<template>
  <div class="page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b>在线申报系统首页</b>
      </div>
      <div class="group_item">
        <div class="group_item_top">
          <span>申报系统说明</span>
        </div>
        <div class="group_item_content">
          <b>申报过程中注意事项：</b>
          <p>1．请务必使用<span style="color:red"><b>谷歌Chrome</b></span>浏览器进行申报。 </p>
          <p>2．及时保存申报数据，以防止网络、浏览器未响应等因素引起数据丢失。 </p>
          <p>3．保存申报数据，只需点击一次，系统会接收到并给出处理反馈，请切记不能进行重复点击。 </p>
          <p>4．同一台电脑同一个浏览器同时只能登录一个帐号进行申报，否则可能会引起申报数据问题。 </p>
          <p>5．项目申报所有内容提交完成之后，一定要进行预检确认，没有问题后再上传签字盖章版材料，并正式提交。</p>
          <b>申报系统中有以下主要操作按钮：</b>
          <p>1． <el-button size="mini" type="primary">上一步</el-button>：返回上一步申报内容 <span style="color:red;">(注：不保存当前修改内容)</span></p>
          <p>2． <el-button size="mini" type="primary">保存</el-button>：保存当前申报内容 </p>
          <p>3． <el-button size="mini" type="primary">下一步</el-button>：进入下一步申报内容 <span style="color:red;">(注：不保存当前修改内容)</span></p>
        </div>
      </div>
      <div class="group_item">
        <div class="group_item_top">
          <span>申报时间</span>
        </div>
        <div class="group_item_content">
          <p>1．申报截止时间为【2018年5月4日16点整】，请在规定时间前提交。</p>
          <p>2．每次提交成功后，数据将进行保留，在正式提交前可进行修改，完成提交后不可进行修改。</p>
          <p>3．评审内容以最后一次提交为准。</p>
          
        </div>
      </div>
      <div class="group_item">
        <div class="group_item_top">
          <span>申报状态</span>
        </div>
        <div class="group_item_content">
         <el-steps :active="actived">
            <el-step title="承诺书" description="步骤 1" icon="el-icon-tickets"></el-step>
            <el-step title="作者信息" description="步骤 2" icon="el-icon-info"></el-step>
            <el-step title="素质测评" description="步骤 3" icon="el-icon-edit"></el-step>
            <el-step title="项目申报" description="步骤 4" icon="el-icon-sort"></el-step>
            <el-step title="审核申报书" description="步骤 5" icon="el-icon-view"></el-step>
            <el-step title="打印申报书" description="步骤 6" icon="el-icon-printer"></el-step>
            <el-step title="上传盖章材料" description="步骤 7" icon="el-icon-upload"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="group_item">
        <div class="group_item_top">
          <span>申报流程</span>
        </div>
        <div class="group_item_content disbox">
          
          <div>
            <img src="../../assets/image/1.png" alt="" style="width:200px">
          </div>
          
          <div>
            <el-collapse v-model="activeNames" class=""  style="width:675px;margin-top:30px;margin-left:40px;">
              <el-collapse-item title="步骤一" name="1">
                <div>请仔细阅读系统首页相关说明，避免在操作中发生错误。请按照步骤一步一步完成，避免跳跃式的填写带来的误操作。</div>
              </el-collapse-item>
              <el-collapse-item title="步骤二" name="2">
                <div>仔细阅读承诺书，确认后点击接受，将会在等待30秒后，进行其他操作。</div>
              </el-collapse-item>
              <el-collapse-item title="步骤三" name="3">
                <div>填写作者信息栏目，即申报表一：基本申报表，完整填写后，点击保存，如果保存成功，会有提示保存成功，成功后点击下一步</div>
              </el-collapse-item>
              <el-collapse-item title="步骤四" name="4">
                <div>素质测评，点击进入测评后，可进入测评系统登录界面，登录帐号为注册时填写的身份证号码，密码为注册时填写的手机号码。</div>
                <div>完成测评后，进入本系统界面竟会有您的成绩，如果没有显示测评分数，请刷新界面。</div>
              </el-collapse-item>
              <el-collapse-item title="步骤五" name="5">
                <div>请依次填写研究项目，个人陈述，辅导教师，学习成绩，指导专家五个表，必填表为必需要填写完成的表，选填表可以不必填写。</div>
                <div>填写完成后务必点击保存，提示保存成功后再进行下一步。</div>
              </el-collapse-item>
              <el-collapse-item title="步骤六" name="6">
                <div>在预检打印申报书栏目下，点击“查看预检申报书”，如果浏览器提示弹窗被拦截，请选择不拦截或者允许弹窗，就会看到今天写的所有表单的预览PDF文档，检查您所填写的信息，确认无误后，点击“检查无误，确认提交”（注：提交后，所有的表单信息将无法再修改），提交后会显示“下载正式申报书”，下载并把手写部分填写完成，扫描成pdf文件。</div>
              </el-collapse-item>
              <el-collapse-item title="步骤七" name="7">
                <div>下载的申报书，签名并且盖章后，按照上传申报书的上传注释上传相应的文件，必须为pdf文件。确认上传后将不能进行任何操作。</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
 
  data() {
    return {
      actived: 0,
      activeNames: ['1','2','3','4','5','6','7']
    }

  },
  methods: {
    
  },
  mounted () {
    this.$http.get('/filing/process/info').then((res) => {
      this.actived = res.data.process - 1
    })
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
.disbox {
  display: flex;
  flex-grow: 1;
}
</style>
